<template>
  <a-card>
    <a-space class="operator">
      <a-button type="primary" v-on:click="add()">新建</a-button>
      <!-- <a-button >批量操作</a-button> -->
      <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">
          <!-- <a-menu-item key="delete">删除</a-menu-item>
            <a-menu-item key="audit">审批</a-menu-item> -->

          <!-- <a-menu-item key="toLead">
            <a-icon type="upload" />导入
            <input
              type="file"
              title=""
              @change="fileChange"
              v-show="false"
              id="upload"
            />
          </a-menu-item> -->

          <a-menu-item
            v-on:click="batchDel()"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="delete" />批量删除
          </a-menu-item>
          <a-menu-item
            v-on:click="batchStatus(1)"
            :disabled="selectedRowKeys.length < 1"
          >
           <a-icon type="check-circle" />批量启用
          </a-menu-item>
          <a-menu-item
            v-on:click="batchStatus(0)"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="stop" />批量禁用
          </a-menu-item>
        </a-menu>
        <a-button> 批量操作 <a-icon type="down" /> </a-button>
      </a-dropdown>

      <!-- <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">
         

          <a-menu-item key="toLead">
            <a-icon type="upload" />导入
            <input
              type="file"
              title=""
              @change="fileChange"
              v-show="false"
              id="upload"
            />
          </a-menu-item>

          <a-menu-item key="toOut">
            <a-icon type="vertical-align-bottom" />导出
          </a-menu-item>
        </a-menu>
        <a-button> 更多操作 <a-icon type="down" /> </a-button>
      </a-dropdown> -->
    </a-space>
    <!-- <standard-table
        :columns="columns"
        :dataSource="dataSource"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="description" slot-scope="{ text }">
          {{ text }}
        </div>
        <div slot="action" slot-scope="{ text, record }">
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table> -->
    <!-- <div class="table-adv"> -->
    <advance-table
      :columns="columns"
      :data-source="dataSource"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :title="tableTitle"
      :loading="loading"
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset"
      :bordered="true"
      :scroll="{ x: 1000 }"
      :pagination="false"
    >
      <!-- <template slot="statusTitle">
        状态<a-icon style="margin: 0 4px" type="info-circle" />
      </template> -->

      <template slot="nickName" slot-scope="{ text }">
        {{ text.nickName
        }}<a-tag
          style="margin-left: 5px"
          v-show="text.top_time"
          v-on:click="operate('onTop', text, true)"
          >置顶</a-tag
        >
      </template>
      <template slot="status" slot-scope="{ text }">
        <a-tag> {{ text ? "启用中" : "已禁用" }} </a-tag>
      </template>

      <template slot="operation" slot-scope="{ text }">
        <div class="operation">
          <a href="javascript:;" v-on:click="operate('edit', text)">编辑</a>

          <a-popconfirm
            :title="`确定要${text.top_time ? '取消' : ''}置顶吗?`"
            @confirm="() => operate('onTop', text)"
          >
            <a href="javascript:;" v-show="text.top_time">取消置顶</a>
            <a href="javascript:;" v-show="!text.top_time">置顶</a>
          </a-popconfirm>
          <a-popconfirm
            :title="`确定要${text.status ? '禁用' : '启用'}吗?`"
            @confirm="() => operate('status', text)"
          >
            <a href="javascript:;" v-show="text.status">禁用</a>
            <a href="javascript:;" v-show="!text.status">启用</a>
          </a-popconfirm>
          <a-popconfirm
            :title="`确定要删除吗?`"
            @confirm="() => operateDel(text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </advance-table>

    <div class="show-right">
      <a-pagination
        :current="page"
        :pageSize="pageSize"
        :total="total"
        :showSizeChanger="true"
        :showLessItems="true"
        :showQuickJumper="true"
        :pageSizeOptions="['10', '20', '50', '100', '500', ...total.toString()]"
        :scroll="{ x: 1300 }"
        :showTotal="
          (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
        "
        @change="onPageChange"
        @showSizeChange="onSizeChange"
        :loading="loading"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value == total">全部</span>
          <span v-else>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>

    <!-- </div> -->
    <!-- <router-view> </router-view> -->
  </a-card>
</template>

<script>
// import StandardTable from "@/components/table/StandardTable";
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import { adminList, adminEdit, adminRoleList } from "@/services/admin";

export default {
  name: "TeachingCulture",
  components: { AdvanceTable },
  data() {
    return {
      loading: false, //表格是否加载中
      page: 1, //第几页
      pageSize: 10, //一页多少条
      total: 0, //总共多少条
      tableTitle: " ", //表格标题
      keyWord: {}, //关键词搜索
      selectedRowKeys: [], //批量操作
      columns: [
        //显示什么列
        
        {
          title: "用户名",
          dataIndex: "userName",

          width: 200,
          returnField: "like-admins-userName",
          searchAble: true,
        },
        {
          title: "昵称",
          returnField: "like-admins-nickeName",
          scopedSlots: { customRender: "nickName" },
          width: 200,
          searchAble: true,
        },
        {
          title: "权限名称",
          dataIndex: "roleName",
          ellipsis: true,
          width: 250,
          returnField: "equal-admins-roleId",
          dataType: "select",
          searchAble: true,
          search: {
            selectOptions: [],
          },
        },
        {
          title: "状态",
          dataIndex: "status",
          width: 150,
          returnField: "equal-admins-status",
          dataType: "boolean",
          scopedSlots: { customRender: "status" },
          search: {
            switchOptions: {
              checkedText: "启用",
              uncheckedText: "禁用",
            },
          },
        },
         {
          title: "所属部门",
          dataIndex: "division_name",
          ellipsis: true,

          width: 200,
          returnField: "like-crm_division-name",
        },
        {
          title: "真实姓名",
          dataIndex: "realName",
          ellipsis: true,

          width: 200,
          returnField: "like-admins-realName",
        },

        {
          title: "电话号码",
          dataIndex: "phone",
          ellipsis: true,

          width: 200,
          returnField: "like-admins-phone",
        },
        {
          title: "邮箱",
          dataIndex: "email",
          ellipsis: true,

          width: 200,
          returnField: "like-admins-email",
        },
        {
          title: "生日",
          dataIndex: "birthday",
          ellipsis: true,

          width: 200,
          returnField: "equal-admins-birthday",
          dataType: "date",
        },

        {
          title: "性别",
          dataIndex: "sex",
          width: 80,
          returnField: "equal-admins-sex",
          dataType: "select",
          search: {
            selectOptions: [
              { value: "男", title: "男" },
              { value: "女", title: "女" },
              { value: "未知", title: "未知" },
            ],
          },
        },

        // {
        //   title: "注册地址",
        //   dataIndex: "registeredAddress",
        //   returnField: "like-teaching-registeredAddress",
        //   width: 300,
        //   ellipsis: true,
        // },
        // {
        //   title: "经营范围",
        //   returnField: "like-teaching-scopeBusiness",
        //   dataIndex: "scopeBusiness",
        //   width: 150,
        // },
        // {
        //   title: "成立日期",
        //   dataIndex: "setUpDate",
        //   returnField: "like-teaching-setUpDate",
        //   width: 150,
        //   dataType: "date",
        // },
        // {
        //   title: "核准日期",
        //   dataIndex: "approvedDate",
        //   returnField: "like-teaching-approvedDate",
        //   width: 150,
        //   dataType: "date",
        // },
        // {
        //   title: "法人",
        //   returnField: "like-teaching-legalPerson",
        //   dataIndex: "legalPerson",
        //   width: 150,
        // },
        // {
        //   title: "沟通跟进情况",
        //   returnField: "like-teaching-followUpSituation",
        //   dataIndex: "followUpSituation",
        //   width: 300,
        //   ellipsis: true,
        // },
        // {
        //   title: "工商手机号",
        //   dataIndex: "phoneMessage",
        //   returnField: "like-teaching-phoneMessage",

        //   scopedSlots: { customRender: "phoneMessage" },
        //   width: 300,
        // },
        // {
        //   title: "年报电话",
        //   dataIndex: "annalsPhone",
        //   returnField: "like-teaching-annalsPhone",

        //   scopedSlots: { customRender: "annalsPhone" },
        //   width: 300,
        //   ellipsis: true,
        // },
        // {
        //   title: "年报邮箱",
        //   dataIndex: "annalsEmail",
        //   returnField: "like-teaching-annalsEmail",
        //   scopedSlots: { customRender: "annalsEmail" },
        //   width: 300,
        //   ellipsis: true,
        // },
        // // {
        // //   // searchAble: true,
        // //   dataIndex: "status",
        // //   dataType: "select",
        // //   slots: { title: "statusTitle" },
        // //   scopedSlots: { customRender: "status" },
        // //   search: {
        // //     selectOptions: [
        // //       { title: "已下单", value: 1 },
        // //       { title: "已付款", value: 2 },
        // //       { title: "已审核", value: 3 },
        // //       { title: "已发货", value: 4 },
        // //     ],
        // //   },
        // // },
        // // {
        // //   title: "发货",
        // //   // searchAble: true,
        // //   dataIndex: "send",
        // //   dataType: "boolean",
        // //   scopedSlots: { customRender: "send" },
        // //   search: {
        // //     switchOptions: {
        // //       checkedText: "开",
        // //       uncheckedText: "关",
        // //     },
        // //   },
        // // },
        // // {
        // //   title: "审核时间",
        // //   dataIndex: "auditTime",
        // //   dataType: "time",
        // // },
        {
          title: "操作",
          fixed: "right",
          notSearch: true,
          width: 220,
          scopedSlots: { customRender: "operation" },
        },
      ],
      dataSource: [], //显示的数据
      conditions: {}, //条件
      visible: false, //导入弹出层
      fileFormData: {}, //文件上传预备
      confirmLoading: false, //导入按钮lading
      uploadForm: this.$form.createForm(this),
    };
  },
  authorize: {
    operate: "编辑",
    batchStatus:"编辑",
    add: "添加",
    operateDel: "删除",
    batchDel: "删除",
  },
  created() {
    // this.getColumns()
    this.tableLoad(); //表格查询
  },
  methods: {
    onSearch(conditions, searchOptions) {
      // console.log(searchOptions);
      // console.log(conditions);
      if (conditions.hasOwnProperty("equal-admins-status")) {
        conditions["equal-admins-status"] = conditions["equal-admins-status"]
          ? 1
          : 0;
      }

      this.keyWord = conditions;
      this.page = 1;
      // this.conditions = conditions;
      this.tableLoad();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.tableLoad();
    },
    onRefresh(conditions) {
      this.conditions = conditions;
      this.tableLoad();
    },
    onReset(conditions) {
      this.conditions = conditions;
      this.tableLoad();
    },
    onPageChange(page, pageSize) {
      // alert()
      this.page = page;
      this.pageSize = pageSize;
      this.tableLoad();
    },

    add() {
      this.$router.push("/personnelManagement/adminAdd");
    },
    async roleLoad() {
      this.columns[2].loading = true;
      let roleList = await adminRoleList({
        selectOrId:'',
        field: ["`id` as `value`", "`name`  as `title`"],
      });
      this.columns[2].search.selectOptions = roleList.data;
      this.columns[2].search.selectOptions.unshift({"value":-1,"title":'无权限'})
      this.columns[2].loading = !this.columns[2].loading;
    },

    async tableLoad() {
      this.loading = true;
      const { page, pageSize, keyWord, roleLoad } = this;

      // console.log(teachingGoupByList);
      roleLoad(); //分类查询

      let teaching = await adminList({
        page: page,
        pageSize: pageSize,
        keyWord: keyWord,
      });
      //console.log(teaching);
      const { list, total } = teaching.data;
      this.dataSource = list;
      this.total = total;
      this.loading = false;
    },
    async operate(key, data, top = false) {
      const { sysTime, $message, tableLoad } = this;
      switch (
        key //置顶操作
      ) {
        case "onTop":
          $message.loading({ content: "修改中", key: "loading" });
          let res = await adminEdit({
            formData: { top_time: data.top_time && !top ? null : sysTime() },
            id: data.id,
          });
          if (res.code == 200) {
            $message.success({
              content: "修改成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }

          break;
        case "status":
          $message.loading({ content: "修改中", key: "loading" });
          let adminRes = await adminEdit({
            formData: { status: data.status ? 0 : 1 },
            id: data.id,
          });
          if (adminRes.code == 200) {
            $message.success({
              content: "修改成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
          break;
        case "edit":
          this.$router.push({
            path: "/personnelManagement/adminEdit",
            query: { admin_id: data.id },
          });

          break;
      }
    },
    async operateDel(data) {
      const { sysTime, $message, tableLoad } = this;
      $message.loading({ content: "删除中", key: "loading" });
      let res = await adminEdit({
        formData: { delete_time: sysTime() },
        id: data.id,
      });
      if (res.code == 200) {
        $message.success({
          content: "删除成功",
          key: "loading",
          duration: 2,
        });
        tableLoad();
      }
    },
    batchDel() {
      const { sysTime, $message, tableLoad, $confirm, selectedRowKeys } = this;

      $confirm({
        title: "确定要删除吗?",
        async onOk() {
          $message.loading({ content: "删除中", key: "loading" });
          let res = await adminEdit({
            formData: { delete_time: sysTime() },
            id: selectedRowKeys,
          });
          if (res.code == 200) {
            $message.success({
              content: "删除成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
        },
      });
    },
    batchStatus(status){
       const {  $message, tableLoad, $confirm, selectedRowKeys } = this;
      let text = status?'启用':'禁用'
      $confirm({
        title: "确定要"+text+"吗?",
        async onOk() {
          $message.loading({ content: text+"中", key: "loading" });
          let res = await adminEdit({
            formData: { status: status },
            id: selectedRowKeys,
          });
          if (res.code == 200) {
            $message.success({
              content: text+"成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
        },
      });
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // async batchDel() {
    //   const { sysTime, $message, tableLoad } = this;
    //   $message.loading({ content: "删除中", key: "loading" });
    //   let res = await teachingUpdate({
    //     formData: { delete_time: sysTime() },
    //     id: this.selectedRowKeys,
    //   });
    //   if (res.code == 200) {
    //     $message.success({
    //       content: "删除成功",
    //       key: "loading",
    //       duration: 2,
    //     });
    //     tableLoad();
    //   }
    // },
    handleMenuClick(e) {
      if (e.key === "toLead") {
        //导入
        let upload = document.getElementById("upload");

        upload.click();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-adv {
  max-width: 100%;
  // border: 1px solid blue;
  overflow: auto;
  white-space: nowrap;
}

.show-right {
  float: right;
  margin-top: 10px;
}
.operation {
  display: flex;
  justify-content: space-between;
}
.over-one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
